<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>化妆品商城</title>
  <link rel="stylesheet" href="js/swiper.min.js">
  <link rel="stylesheet" href="js/swiper.min.css">
</head>
<style>
*{margin: 0; padding: 0;}
li{list-style: none;}
a{text-decoration: none;}
.box{
  width: 1614px;
  margin: 0 auto;
}
.top{
  height: 140px;
  display: flex;
  justify-content: space-between;
  padding: 0 85px 0 50px;
  box-sizing: border-box;
  align-items: center;
  position: relative;
  box-shadow: 0 1px 3px #002e00;
}
.top-right{
  display: flex;
}
.form{
  width: 260px;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
}
.form input{
  border: none;
  outline: none;
  background: none;
  height: 30px;
  width: 190px;
  box-sizing: border-box;
  padding: 0 6px;
}
.form button{
  border: none;
  outline: none;
  background: none;
  height: 28px;
  width: 60px;
  box-sizing: border-box;
  border-left: 1px solid #ccc;
  color: #333;
  text-align: center;
}
.nav{
  display: flex;
}
.nav li{
  margin: 0 50px;
}
.nav li a{
  color: #333;
}
.nav li a:hover{
  color: #f36;
}
.login-box{
  position: absolute;
  bottom: 15px;
  right: 25px;
}
.login-box a{
  color: #333;
  margin-left: 20px;
}
.ban-box{
  display: flex;
}
.left{
  width: 30%;
  box-sizing: border-box;
  border-right: 1px solid #002e00;
  
}
.cp1{
  padding: 15px 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #002e00;
}
.cp1>h3{
  color: #002e00;
}
.cp1-list{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 20px;
}
.cp1-list li{
  width: 33.33%;
  text-align: left;
  padding-left: 30px;
  box-sizing: border-box;
  margin-top: 10px;
}
.cp1-list li a{
  color: #666;
}
.cp1-list li a:hover{
  color: #f36;
}
.banner-box{
  width: 70%;
  height: 474px;
  background:url(../style/shop/images/bg.jpg);
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.banner{
  width: 93%;
  height: 65%;
  background: #002e00;
}
.banner .swiper-container{
  width: 100%;
  height: 100%;
}
.banner .swiper-container img{
  width: 100%;
}
.list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.list li{
  width: 30%;
  margin-top: 20px;
  padding: 10px;
  box-sizing: border-box;
  padding-bottom: 20px;
  border: 1px solid #eee;
}
.list li>img{
  width: 100%;
  height: 197px;
}
.list li>div{
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.list li>div a{
  color: #002e00;
  margin: 0 50px;
}
.list li>div a:hover{
  color: #f36;
}
.footer{
  height: 274px;
  background: #002e00;
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.gg{
  display: flex;
  align-items: flex-end;
  padding-bottom: 20px;
  color: #fff;
}
.gg img{
  margin-right: 10px;
}
.f-list{
  padding-top: 15px;
  margin-left: 50px;
  color: #fff;
}
.f-list h3{
  margin-bottom: 20px;
  padding-left: 30px;
}
.f-list li{
  padding-left: 30px;
  margin-top: 10px;
}
.d1{
	width: 1350px;
	margin: auto;
	}
.d2{
	float: left;
	width: 300px;
	height: 200px;
	padding: 10px;
	border-radius: 10px;
	background-color:rgba(91,89,89,1.00);
	margin: 0 6px;
	margin-top: 5px;
	text-align: center;
}
.d2 img{
		border-radius: 10px;
	}
</style>
<body>
  <div class="box">
    <div class="top">
      <img src="../style/shop/images/logo.jpg" class="logo">
      <div class="top-right">
        <ul class="nav">
        <li><a href="../sy.php">首页</a></li>
          <li><a href="../ppjs.php">品牌故事</a></li>
          <li><a href="index.php">购物城</a></li>
          <li><a href="../huiyzx.php">会员中心</a>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; </li>
        </ul>
      </div>
      <div class="login-box">
        <a href="../logout.php">登录</a>
        <a href="../register.php">注册</a>
      </div>
    </div>
    <div class="ban-box">
      <div class="left">
        <div class="cp1">
          <h3>产品类别</h3>
          <ul class="cp1-list">
            <li><a href="../duoci.php">基础护理</a></li>
            <li><a href="../duoci.php">面膜</a></li>
            <li><a href="../duoci.php">洁面与卸妆</a></li>
            <li><a href="../duoci.php">防晒</a></li>
            <li><a href="../duoci.php">彩妆</a></li>
            <li><a href="../duoci.php">美甲</a></li>
            <li><a href="../duoci.php">身体护理</a></li>
            <li><a href="../duoci.php">男士系列</a></li>
            <li><a href="../duoci.php">美容工具</a></li>
            <li><a href="../duoci.php">婴儿洗护</a></li>
            <li><a href="../duoci.php">面部底妆</a></li>
            <li><a href="../duoci.php">优惠套装</a></li>
          </ul>
        </div>
        <div class="cp1">
          <h3>护肤系列</h3>
          <ul class="cp1-list">
            <li><a href="../duoci.php">绿茶精粹</a></li>
            <li><a href="../duoci.php">冀州石榴</a></li>
            <li><a href="../duoci.php">都市净化</a></li>
            <li><a href="../duoci.php">雪耳</a></li>
            <li><a href="../duoci.php">山茶花</a></li>
            <li><a href="../duoci.php">橄榄</a></li>
            <li><a href="../duoci.php">寒兰</a></li>
            <li><a href="../duoci.php">黑茶</a></li>
            <li><a href="../duoci.php">熔岩海冰</a></li>
            <li><a href="../duoci.php">油菜花蜜</a></li>
            <li><a href="../duoci.php">济州青麦</a></li>
            <li><a href="../duoci.php">青苹果</a></li>
            <li><a href="../duoci.php">发酵豆</a></li>
            <li><a href="../duoci.php">济州温泉水</a></li>
            <li><a href="../duoci.php">芦荟</a></li>
            <li><a href="../duoci.php">火山岩泥</a></li>
            <li><a href="../duoci.php">白牡丹</a></li>
            <li><a href="../duoci.php">海盐</a></li>
          </ul>
        </div>
      </div>
      <div class="banner-box">
        <div class="banner">
          <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../style/shop/images/ban1.jpg"></div>
                <div class="swiper-slide"><img src="../style/shop/images/ban2.jpg"></div>
                <div class="swiper-slide"><img src="../style/shop/images/ban3.jpg"></div>
            </div>
            <div class="swiper-pagination"></div>
            
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          </div>
        </div>
      </div>
      </div>
   </div>
    <div class="container">
      <ul class="list">
        <li>
          <img src="../style/shop/images/100.png" />

        </li>
        <li>
          <img src="../style/shop/images/200.jpg"/>
          
        </li>
        <li>
          <img src="../style/shop/images/300.jpg">
          
        </li>
        <li>
          <img src="../style/shop/images/400.jpg">
          
        </li>
        <li>
          <img src="../style/shop/images/500.jpg">
          <div>
            
          </div>
        </li>
        <li>
          <img src="../style/shop/images/600.jpg">
         
        </li>
      </ul>
    </div>
      <div>
  <table width="500" align="center">
  <tr>
  <td align="center">
  <a href="index.php?languages=新品推荐" style="background: none rgb(65, 105, 94); color: rgb(255, 255, 255); font-family: SourceHanSansCN-Bold; font-size: 12pt; border-bottom-left-radius: 50px; border-top-left-radius: 50px; outline: none;">新品推荐</a>
  <a href="index.php?languages=畅销产品" style="background: none rgb(65, 105, 94); color: rgb(255, 255, 255); font-family: SourceHanSansCN-Bold; font-size: 12pt; border-bottom-left-radius: 50px; border-top-left-radius: 50px; outline: none;">畅销产品</a>
  </td>
  </tr>
 </table>
   <?php
	include("../conn/conn.php");
$page=$_GET['p'];
if($page==""){
$page=1;
}

$num=8;
$sql="select * from tb_video";
$sql_fy="select * from tb_video limit ".($page-1)*$num.",".$num;
$result=mysqli_query($link,$sql);
$rows=mysqli_num_rows($result);
$to_pages=ceil($rows/$num);
$result_fy=mysqli_query($link,$sql_fy);
if(mysqli_num_rows($result_fy)>0){
		?>
        <div class="d1">
<?php
    $num=0;
    while($row_v=mysqli_fetch_assoc($result_fy)){
		?>
     <div class="d2">
     
			<table width="100%" border="0" class="bk" align="center" >
				<tr>
		  			<td align="center">
          				<a href="../xxxx.php?id1=<?=$row_v[id]?>"><img src="../style/shop/images/<?=$row_v[picture]?>" width="200"/ class="img">
          				</a>
         			 </td>
                     <td>
                    	<?=$row_v[name]?>
                    </td>
        		</tr>
				<tr>
                	<td>
                    	<?=$row_v[type]?>
                    </td>
       				 <td>
                     	状态:<a style="color:#F90"><?=$row_v[actor]?></a>
                     </td>
                </tr>
	  		</table>
      </div>
<?php
	}

}else{
	echo ("没有你寻找的产品哦");
	}
?>
</div>
<table width="1200">
					<tr>
						<td align="center" valign="middle" height="80">
							第<?=$page?>页/共<?=$to_pages?>页
						</td>
                        <td align="center" valign="middle" height="80">
							<a href="index.php?p=1" class="link-b">首页<a>
						</td>
                        <td align="center" valign="middle" height="80">
                        <?php
							if($page>=$to_pages){
								echo "下一页";
							}else{
						?>
							<a href="index.php?p=<?=($page+1)?>" class="link-b">下一页<a>
							<?php
							}
							?>
						</td>
                        <td align="center" valign="middle" height="80">
                        <?php
							if($page=1){
								echo "上一页";
							}else{
							?>
							<a href="index.php?p=<?=($page-1)?>" class="link-b">上一页<a>
							<?php
							}
							?>
						</td>
                        <td align="center" valign="middle" height="80">
							<a href="index.php?p=<?=$to_pages?>" class="link-b">尾页</a>
						</td>
					</tr>
				</table>
  <div class="footer">
      <img src="../style/shop/images/footer.png" height="270px">
      <div class="gg">
        <img src="../style/shop/images/icon.png" height="20px">
        <p>沪公网安备 31010602000985</p>
      </div>
      <ul class="f-list">
        <h3>联系我们</h3>
        <li>订单咨询热线:021-61255625</li>
        <li>工作时间：09:00-21:00</li>
        <li>品牌服务热线：400-920-9238</li>
        <li>服务时间：09:00-21:00(不含国定假日)</li>
        <li>客服邮件：innisfree@innisfree.cn</li>
      </ul>
    </div>

  </div> 
  <script src="js/swiper.min.js"></script>
  <script>        
    var mySwiper = new Swiper ('.swiper-container', {
      loop: true, // 循环模式选项
      autoplay: {
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable :true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    })        
  </script>
</body>
</html>